<template>
  <div class="people-info-tabs flex flex-column">
    <tabs-group v-model="tab" :data-list="dataList" class="flex-fixed" style='width: 100%'/>
    <component :is="current" v-bind="$attrs" :data="data" class="flex-auto-height" style="width: 100%; padding: 15px" />
  </div>
</template>

<script>
import TabsGroup from '@gis/lib/components/tabs-group.vue';

import HouseInfo from './house-info/index.vue';
import LiveInfo from './live-info.vue';
import CardInfo from './card-info/index.vue';
import BusinessInfo from './business-info.vue';
import InOutInfo from './in-out-info.vue';
import HomeLiveInfo from './home-live-info.vue';
import InterviewInfo from './interview-info/index.vue';
import NetRoomLiveInfo from './net-room-live-info.vue';
import SmartBracelet from './smart-bracelet/index.vue';
import InOutPlace from './in-out-place.vue';
import InOutWay from './in-out-way.vue';
import CarManage from './car-manage.vue';

export default {
  name: 'people-info-tabs',
  components: { TabsGroup },
  props: {
    data: { type: Object, default: () => ({}) },
    //显示tab
    showTab: { type: Array, default: () => [] },
  },
  data() {
    return {
      tab: Array.isArray(this.showTab) && this.showTab.length ? this.showTab[0] : '0',
      tabList: [
        { label: '房产信息', value: '0' },
        { label: '入住记录', value: '1' },
        { label: '卡信息', value: '2' },
        { label: '业务信息', value: '3' },
        { label: '出入记录', value: '4' },
        // { label: "家居信息", value: "5" },
        { label: '走访记录', value: '6' },
        { label: '网约房入住记录', value: '7' },
        { label: '智能手环', value: '8' },
        // { label: "常出入地点", value: "9" },
        // { label: "出入方式分析", value: "10" },
        { label: '车辆管理', value: '11' },
      ],
      tabPages: {
        0: HouseInfo,
        1: LiveInfo,
        2: CardInfo,
        3: BusinessInfo,
        4: InOutInfo,
        // 5: () => import("./home-live-info.vue"),
        6: InterviewInfo,
        7: NetRoomLiveInfo,
        8: SmartBracelet,
        // 9: () => import("./in-out-place.vue"),
        // 10: () => import("./in-out-way.vue"),
        11: CarManage,
      },
    };
  },
  computed: {
    dataList() {
      return Array.isArray(this.showTab) && this.showTab.length
        ? this.tabList.filter((item) => this.showTab.includes(item.value))
        : this.tabList;
    },
    current() {
      return this.tabPages[this.tab];
    },
  },
};
</script>

<style lang="less">
.people-info-tabs {
  height: 100%;
  width: 100%;
}
</style>
